<template>
    <div class="marketing_seckill_detail_stats">
        <div class="info">
            <div class="title">
                <div class="block"></div>
                数据预览
            </div>
            <div class="amount">
                <el-row>
                    <el-col :span="8">
                        <div class="num">
                            {{ floatDivide(data?.orderAmount || 0, 100) }}
                        </div>
                        <div>订单金额(元)</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="num">{{ data?.orderNum || 0 }}</div>
                        <div>付款订单数</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="num">{{ data?.payNumber || 0 }}</div>
                        <div>付款人数</div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div>
            <div class="title">
                <div class="block"></div>
                秒杀记录
            </div>
            <div class="search">
                <div>
                    <el-input
                        class="input"
                        placeholder="根据订单编号、会员手机号查询"
                        v-model="form.keywords"></el-input>
                    <el-button type="primary" @click="initSearchHandler"> 查询 </el-button>
                </div>
                <div>
                    <el-button v-auth="'seckill_list:stats_export'" @click="exportSearch"> 导出 </el-button>
                </div>
            </div>
            <el-table :data="tableData" stripe>
                <el-table-column prop="orderNo" label="订单编号" min-width="160" />
                <el-table-column prop="skuInfo" label="商品规格" min-width="160">
                    <template v-slot="{ row }">
                        <span v-for="(item, index) in row.skuInfo" :key="item.id">
                            <span v-for="(e, idx) in item.skuExt" :key="e.skuAttrId">
                                <span> {{ e?.specAttr?.specAttrKeyName }}:{{ e?.specAttr.attributeValue }} </span>
                                <span v-if="idx != item.skuExt.length - 1">；</span>
                            </span>
                            <span v-if="index != row.skuInfo.length - 1">；</span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="spikePrice" label="价格(元)" min-width="160">
                    <template v-slot="{ row }">
                        {{ floatDivide(row.spikePrice, 100) }}
                    </template>
                </el-table-column>
                <el-table-column prop="seckillGoodsCount" label="数量" min-width="150" />
                <el-table-column prop="orderAmount" label="订单金额(元)" min-width="160">
                    <template v-slot="{ row }">
                        {{ floatDivide(row.orderAmount, 100) }}
                    </template>
                </el-table-column>
                <el-table-column prop="buyerUidInfo" label="下单人" min-width="160">
                    <template v-slot="{ row }">
                        {{ row.buyerUidInfo?.nickname }}
                        <span v-if="row.buyerUidInfo?.mobile">
                            {{ '(' + row.buyerUidInfo?.mobile + ')' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="orderPayStatus" label="支付状态" min-width="160">
                    <template v-slot="{ row }">
                        <!-- 1 未支付 2 已支付 3 已关闭' -->
                        <div v-if="row.orderPayStatus == 1">
                            <div class="yellow"></div>
                            未支付
                        </div>
                        <div v-if="row.orderPayStatus == 2">
                            <div class="green"></div>
                            已支付
                        </div>
                        <div v-if="row.orderPayStatus == 3">
                            <div class="red"></div>
                            已关闭
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createdAt" label="创建时间" min-width="170" />
            </el-table>
            <div style="margin-top: 15px">
                <Pagination
                    :total="totalCount"
                    :page-size="form.perPage"
                    :current-page="form.page"
                    @sizeChange="changeSizeHandler"
                    @pageChange="changePageHandler" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, onMounted, onUnmounted, ref } from 'vue';
import { floatDivide } from '@/commons/utils';
import request from '@/request/index';
import { exportExc } from '@/commons/utils';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const props = defineProps({
    data: {
        default: () => {},
        type: Object
    }
});
const tableData = reactive([]);
let totalCount = ref(0);
const formRef = ref();
let form = reactive({
    perPage: 10,
    page: 1,
    id: route.query.id,
    keywords: ''
});
const serachHandler = async () => {
    const res = await request('seckillLogServ', form);
    const list = res.data.list || [];
    tableData.length = 0;
    tableData.push(...list);
    totalCount.value = res.data.totalCount;
};

const changePageHandler = page => {
    form.page = page;
    serachHandler();
};

/**
 * 每页记录数修改
 * @param {*} perPage
 */
const changeSizeHandler = perPage => {
    form.page = 1;
    form.perPage = perPage;
    serachHandler();
};

const initSearchHandler = () => {
    form.page = 1;
    serachHandler();
};

const exportSearch = () => {
    request('exportSeckillServ', { id: route.query.id, keywords: form.keywords }).then(res => {
        exportExc(res, '秒杀记录');
    });
};

onMounted(() => {
    serachHandler();
});
</script>

<style lang="scss" scoped>
.marketing_seckill_detail_stats {
    .title {
        font-size: 14px;
        font-weight: 600;
        color: #33302d;
        line-height: 32px;
        height: 32px;
        .block {
            width: 4px;
            height: 16px;
            background: #ff6b00;
            display: inline-block;
            vertical-align: middle;
        }
    }
    .info {
        .amount {
            margin: 16px 0 40px 10px;
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            .num {
                font-size: 24px;
                font-weight: 600;
                color: #333333;
                line-height: 32px;
            }
        }
    }
    .search {
        margin: 16px 0;
        display: flex;
        justify-content: space-between;
        .input {
            width: 250px;
            margin-right: 24px;
        }
    }
    .yellow {
        width: 8px;
        height: 8px;
        background: #ffd500;
        border-radius: 4px;
        display: inline-block;
    }
    .green {
        width: 8px;
        height: 8px;
        background: #32d1ad;
        border-radius: 4px;
        display: inline-block;
    }
    .red {
        width: 8px;
        height: 8px;
        background: #ff4a1a;
        border-radius: 4px;
        display: inline-block;
    }
}
</style>
